<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引包 -->
    <script src="./echarts.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 50vw;
            height: 50vh;
            display: block;
            border: 1px solid black;
            margin: 10px auto;
        }
    </style>
</head>

<body>
    <!-- 移动高度的容器 -->
    <div class="box"></div>
</body>

</html>
<script>
    //获取echarts类的实例
    let mycharts = echarts.init(document.querySelector('.box'));
    //准备配置对象
    let options = {
        //标题组件
        title: {
            //文本内容
            // text: '饼图'
        },
        //x|y轴组件
        xAxis: {
            //均匀分布
            type: 'category',
        },
        yAxis: {

        },
        //系列:能决定展示的是什么类型图形图标 bar|line|pei
        series: [
            {
                type: 'bar',
                data: [10, 20, 30, 40, 50, 60]
            },
            {
                type: 'bar',
                data: [19, 21, 13, 44, 10, 40]
            },
            {
                type: 'line',
                data: [33, 22, 99, 8, 123, 19],
                smooth: true
            },
            {
                type: 'pie',
                data: [{ name: "鸭梨", value: 100 }, { name: "苹果", value: 200 }, { name: "葡萄", value: 10 }],
                //饼图大小
                width: 250,
                height: 250,
                //位置
                left: 400,
                //半径
                radius: 50,
                //图文标签
                label: {
                    show: true,
                    position: 'outside',
                    color: 'yellowgreen'
                },
                //视觉引线
                labelLine: {
                    smooth: true,
                    showAbove: true,
                    //视觉引线的样式
                    lineStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: 'red' // 0% 处的颜色
                            }, {
                                offset: 1, color: 'blue' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        },
                        type: 'dashed'
                    }
                },
                //每一个扇形区域样式
                itemStyle: {
                color: function (item) {
                    let arr = ['skyblue', 'hotpink', 'yellowgreen']
                    //每一次函数返回结果:即为当前柱状图的颜色
                    return arr[item.dataIndex];
                }
            },
            
            }
        ]
    };
    //调用setOption方法,进行设置
    mycharts.setOption(options);
</script>